<template>
  <div class="">
    <!-- 处理响应式分为左右两边-->
    <div class="w-full md:flex box-border h-screen">
      <div class="w-full md:w-[340px] px-2 py-4 box-border border">
        <div>
          <div class="flex items-center justify-center h-[100px] text-4xl">Sora Web UI</div>
        </div>
        <div class="flex justify-center items-center mb-[20px]">
          <h3>SoraWebui 是一个开源项目，通过允许用户使用文本在线生成视频，使用 OpenAI 的 Sora 模型简化视频创建，具有简单的一键网站部署功能。</h3>
        </div>
        <n-input
          v-model:value="textarea"
          type="textarea"
          :autosize="{ minRows: 14 }"
          placeholder="sora 视频生成描述" />

        <div class="flex justify-center items-center h-[100px]">
          <n-button
            round
            color="#0DC865">
            点击生成视频
          </n-button>
        </div>
      </div>
      <div class="px-2 md:flex-1 box-border md:px-4 md:h-screen md:overflow-y-auto">
        <!-- 右边菜单栏目 -->
        <div class="mx-auto max-w-6xl my-5">
          <!-- 正在加载中的任务-->
          <div v-if="drawList.length > 0">
            <h3 class="font-bold text-lg my-5">正在进行中的任务</h3>
            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
              <!-- 方块类型 使用card 和 grid-->
              <template
                v-for="item in drawList"
                :key="item">
                <n-spin :show="false">
                  <template #description>正在生成中...</template>
                  <n-card>
                    <template #header>
                      <div class="grid grid-cols-2">
                        <div>
                          <n-tag
                            round
                            :bordered="false"
                            type="success">
                            视频生成中
                            <template #icon>
                              <n-icon>
                                <svg
                                  t="1697622817967"
                                  class="icon"
                                  viewBox="0 0 1024 1024"
                                  version="1.1"
                                  xmlns="http://www.w3.org/2000/svg"
                                  p-id="4128">
                                  <path
                                    d="M511.434623 63.564711c-247.428276 0-448.010617 200.582341-448.010617 448.01164 0 247.430322 200.581318 448.01164 448.010617 448.01164 247.432369 0 448.012663-200.581318 448.012663-448.01164C959.447287 264.147052 758.865969 63.564711 511.434623 63.564711zM773.519714 382.576325 447.871959 704.039781 245.771031 507.044128l63.996546-68.093864 138.15964 138.15964 261.086343-261.087367L773.519714 382.576325z"
                                    p-id="4129"></path>
                                </svg>
                              </n-icon>
                            </template>
                          </n-tag>
                        </div>
                      </div>
                    </template>
                    <div class="mx-auto">
                      <n-progress
                        type="circle"
                        :percentage="percentage"
                        :offset-degree="100" />
                    </div>
                  </n-card>
                </n-spin>
              </template>
            </div>
          </div>
          <!-- 我绘制的历史 -->
          <div>
            <h3 class="font-bold text-lg my-5">我的生成历史视频</h3>
            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 gap-4">
              <!-- 方块类型 使用card 和 grid-->
              <template
                v-for="item in myImageList"
                :key="item">
                <n-spin :show="false">
                  <template #description>正在加载中...</template>
                  <n-card hoverable>
                    <template #header>
                      <div class="grid grid-cols-2">
                        <div>
                          <n-tag
                            round
                            :bordered="false"
                            type="success">
                            成功
                            <template #icon>
                              <n-icon>
                                <svg
                                  t="1697622817967"
                                  class="icon"
                                  viewBox="0 0 1024 1024"
                                  version="1.1"
                                  xmlns="http://www.w3.org/2000/svg"
                                  p-id="4128">
                                  <path
                                    d="M511.434623 63.564711c-247.428276 0-448.010617 200.582341-448.010617 448.01164 0 247.430322 200.581318 448.01164 448.010617 448.01164 247.432369 0 448.012663-200.581318 448.012663-448.01164C959.447287 264.147052 758.865969 63.564711 511.434623 63.564711zM773.519714 382.576325 447.871959 704.039781 245.771031 507.044128l63.996546-68.093864 138.15964 138.15964 261.086343-261.087367L773.519714 382.576325z"
                                    p-id="4129"></path>
                                </svg>
                              </n-icon>
                            </template>
                          </n-tag>
                        </div>
                        <div class="flex justify-end items-center">
                          <n-button
                            icon-placement="left"
                            size="tiny"
                            round
                            ghost
                            @click="copy(item['prompt'])">
                            <template #icon>
                              <n-icon>
                                <svg
                                  t="1697709525810"
                                  class="icon"
                                  viewBox="0 0 1024 1024"
                                  version="1.1"
                                  xmlns="http://www.w3.org/2000/svg"
                                  p-id="6169"
                                  width="200"
                                  height="200">
                                  <path
                                    d="M857.373005 65.290005 469.604424 65.290005c-34.211173 0-62.044078 27.832905-62.044078 62.043055l0 10.340509-63.076594 0c-25.993001 0-48.228421 16.346293-57.001225 39.293935L166.626995 176.967504c-34.21015 0-62.043055 27.832905-62.043055 62.043055l0 657.655358c0 34.21015 27.832905 62.043055 62.043055 62.043055l550.115086 0c34.21015 0 62.043055-27.832905 62.043055-62.043055l0-49.634444 78.587869 0c34.21015 0 62.043055-27.832905 62.043055-62.043055L919.41606 127.33306C919.41606 93.122911 891.583155 65.290005 857.373005 65.290005zM344.483752 179.035606l194.402595 0c10.833743 0 19.646456 8.813736 19.646456 19.646456 0 10.833743-8.813736 19.646456-19.646456 19.646456L344.483752 218.328517c-10.833743 0-19.646456-8.813736-19.646456-19.646456C324.836273 187.849342 333.650009 179.035606 344.483752 179.035606zM737.423099 896.665917c0 11.402701-9.278317 20.681018-20.681018 20.681018L166.626995 917.346935c-11.403724 0-20.681018-9.278317-20.681018-20.681018L145.945977 239.010559c0-11.402701 9.277294-20.681018 20.681018-20.681018l120.111588 0c8.197706 24.02723 30.977525 41.362037 57.744145 41.362037l194.402595 0c26.767644 0 49.54644-17.334807 57.744145-41.362037l120.111588 0c11.402701 0 20.681018 9.278317 20.681018 20.681018L737.422076 896.665917zM878.054023 784.988418c0 11.402701-9.278317 20.681018-20.681018 20.681018l-78.587869 0L778.785136 239.010559c0-34.21015-27.832905-62.043055-62.043055-62.043055L595.886549 176.967504c-8.771781-22.947641-31.007201-39.293935-57.001225-39.293935l-89.963964 0L448.921359 127.33306c0-11.403724 9.278317-20.681018 20.683065-20.681018l387.768581 0c11.402701 0 20.681018 9.277294 20.681018 20.681018L878.054023 784.988418z"
                                    fill="currentColor"
                                    p-id="6170"></path>
                                  <path
                                    d="M620.597347 334.252737 260.748652 334.252737c-11.422144 0-20.681018 9.259898-20.681018 20.681018s9.258874 20.681018 20.681018 20.681018l359.849718 0c11.42112 0 20.681018-9.259898 20.681018-20.681018S632.018467 334.252737 620.597347 334.252737z"
                                    fill="currentColor"
                                    p-id="6171"></path>
                                  <path
                                    d="M620.597347 454.201619 260.748652 454.201619c-11.422144 0-20.681018 9.259898-20.681018 20.681018 0 11.42112 9.258874 20.681018 20.681018 20.681018l359.849718 0c11.42112 0 20.681018-9.259898 20.681018-20.681018C641.278365 463.46254 632.018467 454.201619 620.597347 454.201619z"
                                    fill="currentColor"
                                    p-id="6172"></path>
                                  <path
                                    d="M440.673511 574.151525 260.748652 574.151525c-11.422144 0-20.681018 9.259898-20.681018 20.681018 0 11.42112 9.258874 20.681018 20.681018 20.681018l179.924859 0c11.42112 0 20.681018-9.259898 20.681018-20.681018C461.35453 583.411423 452.093609 574.151525 440.673511 574.151525z"
                                    fill="currentColor"
                                    p-id="6173"></path>
                                </svg>
                              </n-icon>
                            </template>
                            关键词复制
                          </n-button>
                          <n-button
                            icon-placement="left"
                            class="mx-1"
                            size="tiny"
                            round
                            ghost
                            @click="download(item['taskUrl'])">
                            <template #icon>
                              <n-icon>
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  xmlns:xlink="http://www.w3.org/1999/xlink"
                                  viewBox="0 0 16 16">
                                  <g fill="none">
                                    <path
                                      d="M3.5 13h9a.5.5 0 0 1 .09.992L12.5 14h-9a.5.5 0 0 1-.09-.992L3.5 13h9h-9zM7.91 1.008L8 1a.5.5 0 0 1 .492.41l.008.09v8.792l2.682-2.681a.5.5 0 0 1 .638-.058l.07.058a.5.5 0 0 1 .057.638l-.058.069l-3.535 3.536a.5.5 0 0 1-.638.057l-.07-.057l-3.535-3.536a.5.5 0 0 1 .638-.765l.069.058L7.5 10.292V1.5a.5.5 0 0 1 .41-.492L8 1l-.09.008z"
                                      fill="currentColor"></path>
                                  </g>
                                </svg>
                              </n-icon>
                            </template>
                            下载
                          </n-button>
                          <n-button
                            size="tiny"
                            round
                            ghost
                            @click="deleteImg(item['taskId'])">
                            <template #icon>
                              <n-icon>
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  xmlns:xlink="http://www.w3.org/1999/xlink"
                                  viewBox="0 0 32 32">
                                  <path
                                    d="M12 12h2v12h-2z"
                                    fill="currentColor"></path>
                                  <path
                                    d="M18 12h2v12h-2z"
                                    fill="currentColor"></path>
                                  <path
                                    d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z"
                                    fill="currentColor"></path>
                                  <path
                                    d="M12 2h8v2h-8z"
                                    fill="currentColor"></path>
                                </svg>
                              </n-icon>
                            </template>
                            删除
                          </n-button>
                        </div>
                      </div>
                    </template>
                    <div class="my-4 ">
                      <div class="w-full h-full flex items-center justify-center">
                        <!-- img图片的显示 -->
                        <video
                          id="my-player"
                          class="video-js vjs-16-9"
                          controls
                          preload="auto"
                          poster="//vjs.zencdn.net/v/oceans.png"
                          data-setup="{'fluid': true}">
                          <p class="vjs-no-js">
                            hi，视频丢失了
                          </p>
                        </video>
                      </div>
                    </div>
                    <template #action>
                      <div>
                        这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述
                      </div>

                      <div class="text-sm text-[#64748b] mt-4">
                        创建时间：{{ item['createTime'] }}
                      </div>
                    </template>
                  </n-card>
                </n-spin>
              </template>
            </div>
            <!-- 分页操作 -->
            <div class="flex items-center justify-end mt-[50px]">
              <w-pagination
                v-model:page="queryParam2.pageNum"
                v-model:limit="queryParam2.pageSize"
                v-show="total > 0"
                :total="total"
                @pagination="getList"></w-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue';
import type { Ref } from 'vue';
import wPagination from '@/components/Pagination/index.vue';
import { download } from '@/utils/download/image';
import { getMyMjList, createMjTask, getProgress, deleteImage } from '@/api/mj/index';
import { useDialog, useMessage } from 'naive-ui';
const dialog = useDialog();
const message = useMessage();
// import mj_cartoon from "@/assets/mj_cartoon.png";
let textCopy = ref('Hello World');
let percentage = ref(0);
import { useClipboard } from '@vueuse/core';
const { copy } = useClipboard({ source: textCopy });
let validateStatus = ref('success');
let textarea = ref('');
let tipsValue: Ref<string> = ref(''); //输入提示词
let drawList = ref<Array<any>>([]);
let myImageList = ref([]);
let total: Ref<number> = ref(10);
let timer: any;
/* 方法区 */
let queryParam = reactive({
  status: 1,
  pageNum: 1,
  pageSize: 10
});
let data = reactive({
  queryParam2: {
    status: 2,
    pageNum: 1,
    pageSize: 10
  }
});
const { queryParam2 } = toRefs(data);
const getList = (type = 1) => {
  if (type == 1) {
    getMyMjList(queryParam).then((res) => {
      // console.log("-----", res.rows);
      drawList.value = res.rows;
      console.log('res', res.total);
      if (res.total == 1) {
        let data = {
          taskId: res.rows[0].taskId
        };
        timer = setInterval(function () {
          console.log('hello');
          getProgress(data)
            .then((response) => {
              percentage.value = Number(response.data.progress.replace(/%/g, ''));
              console.log('===', percentage.value);
              if (response.data.status == 'SUCCESS' && response.data.status == 'FAILURE') {
                clearInterval(timer);
              }
            })
            .catch(() => {})
            .finally(() => {
              clearInterval(timer);
              getList();
              getList(2);
            });
        }, 20 * 1000);
      }
    });
  } else {
    console.log('queryParam2', queryParam2.value);
    getMyMjList(queryParam2.value).then((res) => {
      total.value = res.total;
      myImageList.value = res.rows;
    });
  }
  // 这是列表封装
};
getList();
getList(2);

function submitMessage() {
  if (tipsValue.value.length == 0) {
    validateStatus.value = 'error';
    return;
  }
  validateStatus.value = 'success';
  let param = {
    param: 1,
    prompt: tipsValue.value
  };

  createMjTask(param).then((res) => {
    console.log('jjjxxx', res);
    getList();
  });
}

function deleteImg(taskId: any) {
  dialog.success({
    title: '删除视频',
    content: '您是否确认删除此视频?',
    positiveText: '确定',
    negativeText: '不确定',
    maskClosable: false,
    onPositiveClick: () => {
      console.log('okok');
      deleteImage(taskId).finally(() => {
        getList();
        getList(2);
      });
    }
  });
}
</script>
<style scoped>
.carousel-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  /* position: relative; */
}
.MJ__title {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  font-size: 55px;
}
/* css动画效果 首先缩小，然后放大*/
.square {
  animation: shrinkAndRestore 1s;
}
@keyframes shrinkAndRestore {
  0% {
    transform: scale(1);
  } /* 初始状态：原始大小 */
  50% {
    transform: scale(0.8);
  } /* 50%时：缩小到50% */
  100% {
    transform: scale(1);
  } /* 结束状态：恢复原始大小 */
}
</style>
